<template>
  <div class="food-detail">
    <HeaderTop>
      <template #center>
        <span class="fs-1 strong">{{ food.name }}</span>
      </template>
      <template #left>
        <van-icon name="arrow-left" class="return-back" :size="22" @click="returnBack"></van-icon>
      </template>
    </HeaderTop>
    <van-image width="100%" :src="imgBaseUrl + food.image_path"></van-image>
    <section class="food-show">
      <p class="fs-5 text-1">{{ food.description }}</p>
      <p class="fs-7 text-1">{{ food.name }}</p>
      <p class="fs-7 text-1">
        <span class="mr-2">评分</span>
        <van-rate
          v-model="food.rating"
          readonly
          allow-half
          size="8px"
          color="#fd9b12"
          gutter="1px"
        />
        <span class="ml-1" style="color: #fd9b12">{{ food.rating }}</span>
      </p>
      <p class="fs-7 text-1">
        <span class="mr-2">月售{{ food.month_sales }}单</span>
        <span>售价￥{{ food.specfoods[0].price }}起</span>
      </p>
      <p class="fs-7 text-1">
        <span class="mr-2">评论数&nbsp;{{ food.rating_count }}</span>
        <span>好评率&nbsp;{{ food.satisfy_rate }}</span>
      </p>
      <BuyIcon
        class="food-buy-icon"
        :foods="food"
        :shopId="shopId"
        @mutClick="selectedMutFood"
        @reduceMut="reduceMut"
      ></BuyIcon>
    </section>
  </div>
</template>

<script lang="ts" setup>
import HeaderTop from "@/components/head/HeaderTop.vue";
import { ref, reactive, toRefs, computed, PropType } from "vue";
import { imgBaseUrl } from "dir/env.config";
import { Food } from "@/type/index";
const props = defineProps({
  shopId: String,
  food: Object as PropType<Food>,
});
const emit = defineEmits(["close","selectedMutFood",'reduceMut']);
const { food, shopId } = toRefs(props);
const returnBack = () => {
  emit("close");
};
const selectedMutFood = () => {
    emit("selectedMutFood",food.value)
}
const reduceMut = () => {
    emit('close')
    emit('reduceMut')
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.food-detail {
  position: fixed;
  @include wh(100%, 100%);
  background-color: white;
  left: 0;
  top: 0;
  z-index: 13;
  .return-back {
    transform: translateX(-0.3rem);
  }
  .food-show {
    position: relative;
    p {
      margin-top: 0.2rem;
      margin-bottom: 0.2rem;
      margin-left: 0.2rem;
    }
    .food-buy-icon{
        position: absolute;
        right: 0.4rem;
        top: 0.2rem;
    }
  }

}
</style>
